<template>
	<view>
		<cu-custom  bgColor="bg-black-two"  :isBack="true">
			<block slot="content">{{machineName}}</block>
		</cu-custom>
		<view class="my-bg">
			<view class="flex solid-bottom align-start">
				<view class="flex-sub radius text-center">
					<view class="text-xxl text-white">{{real_product_name | nullzhuantime}}</view>
					<view class="text-gray">工件名称</view>
				</view>
				<view class="flex-sub radius text-center"></view>
				<view class="flex-sub radius text-center">
					<view class="text-xxl text-white">{{real_product_cycle | nullzhuantime}}</view>
					<view class="text-gray">实际生产节拍/s</view>
				</view>
			</view>			
		</view>
		<view class="my-bg">
			<view class="text-white margin-bottom-xs">当月设备利用率</view>
			<view style="height: 200px">
				<l-echart ref="chartPie"></l-echart>
			</view>
		</view>
		<view class="my-bg">
			<view class="text-white margin-bottom-xs">实时加工周期曲线</view>
			<view style="height: 200px">
				<l-echart ref="chartLine"></l-echart>
			</view>
		</view>
		<view class="my-bg">
			<view class="text-white margin-bottom-xs">近7天日产量与运行时长分析</view>
			<view style="height: 200px">
				<l-echart ref="chartBar"></l-echart>
			</view>
		</view>
	</view>
</template>

<script>		
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		data() {
			return {
				machineName:'',
				machineId:'',
				real_product_name:'',
				real_product_cycle:'',
				optionPie:{
					tooltip: {
						trigger: 'item',
						formatter: function (params) {
							var relVal = params.marker + params.data.name +'  '+ params.data.value +' '+'h';
							return relVal
						}
					},
					legend: {
						orient: 'horizontal',
						bottom: 0,
						padding: [100, 50, 0, 5],
						textStyle: {
							color: "#aaaaaa",
							lineHeight: 1
						},
						height: "1%"
					},
					series: [
						{
							top: 0,
							bottom:"12%",
							minAngle: 4,
							selectedMode: "single",
							avoidLabelOverlap: true,
							name: '',
							type: 'pie',
							radius: ["69%", "48%"],
							avoidLabelOverlap: false,
							label: {
								show: false,
								position: 'center',
								color: "#aaaaaa"
							},
							emphasis: {
								label: {
									show: true,
									fontSize: '15',
									fontWeight: 'bold'
								}
							},
							labelLine: {
								show: true,
								length: 80
							},
							data: [
								{value: 1048, name: '运行'},
								{value: 735, name: '待机'},
								{value: 580, name: '调机'},
								{value: 484, name: '报警'},
							]
						}
					]
				},
				optionLine: {
					tooltip: {
						trigger: 'axis',
						formatter: function (params) {
							var relVal = params[0].name;
							for (var i = 0, l = params.length; i < l; i++) {
								//秒数转化为时分秒
								if (params[i].value > 60) {
									// parseInt(params[i].value / 60) 获取分钟，除以60取整数，得到整数分钟
									// parseInt(params[i].value % 60) 获取秒数，秒数取佘，得到整数秒数
									relVal += '\n' + params[i].marker + parseInt(params[i].value / 60) +'m'+parseInt(params[i].value % 60)+'s'
								} else {
									relVal += '\n' + params[i].marker + params[i].value +'s'
								}
							}
							return relVal
						}
					},
					grid: {
						top:'12%',
						left: '1%',
						right: '1%',
						bottom: '17%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: ["2014-07-14", "2014-07-15", "2014-07-16", "2014-07-17", "2014-07-18", "2014-07-19", "2014-07-20", "2014-07-21", "2014-07-22", "2014-07-23", "2014-07-24", "2014-07-25", "2014-07-26", "2014-07-27", "2014-07-28", "2014-07-29", "2014-07-30", "2014-07-31", "2014-08-01", "2014-08-02", "2014-08-03", "2014-08-05", "2014-08-06", "2014-08-07", "2014-08-08", "2014-08-09", "2014-08-10", "2014-08-11", "2014-08-12", "2014-08-13", "2014-08-14", "2014-08-15", "2014-08-16", "2014-08-17", "2014-08-18", "2014-08-19", "2014-08-20", "2014-08-21", "2014-08-22", "2014-08-23", "2014-08-24", "2014-08-25", "2014-08-26", "2014-08-27", "2014-08-28", "2014-08-29", "2014-08-30", "2014-08-31", "2014-09-01", "2014-09-03", "2014-09-04", "2014-09-05", "2014-09-06", "2014-09-07", "2014-09-08", "2014-09-09", "2014-09-10", "2014-09-11", "2014-09-12", "2014-09-13", "2014-09-14", "2014-09-15", "2014-09-16", "2014-09-17", "2014-09-18", "2014-09-19", "2014-09-20", "2014-09-21", "2014-09-22", "2014-09-23", "2014-09-24", "2014-09-25", "2014-09-26", "2014-09-27", "2014-09-28", "2014-09-29", "2014-09-30", "2014-10-01", "2014-10-02", "2014-10-03", "2014-10-04", "2014-10-05", "2014-10-06", "2014-10-07", "2014-10-08", "2014-10-09", "2014-10-10", "2014-10-11", "2014-10-14", "2014-10-15", "2014-10-16", "2014-10-17", "2014-10-18", "2014-10-19", "2014-10-20", "2014-10-21", "2014-10-22", "2014-10-23", "2014-10-24", "2014-10-25", "2014-10-26", "2014-10-27", "2014-10-28", "2014-10-29", "2014-10-30", "2014-10-31", "2014-11-01", "2014-11-03", "2014-11-04", "2014-11-05", "2014-11-07", "2014-11-08", "2014-11-09", "2014-11-10", "2014-11-11", "2014-11-13", "2014-11-14", "2014-11-15", "2014-11-16", "2014-11-17", "2014-11-18", "2014-11-19", "2014-11-23", "2014-11-24", "2014-11-25", "2014-11-26", "2014-11-27", "2014-11-28", "2014-11-29", "2014-12-01", "2014-12-02", "2014-12-03", "2014-12-05", "2014-12-06", "2014-12-07", "2014-12-08", "2014-12-09", "2014-12-10", "2014-12-11", "2014-12-13", "2014-12-14", "2014-12-15", "2014-12-17", "2014-12-19", "2014-12-22", "2014-12-23", "2014-12-25", "2014-12-26", "2014-12-27", "2014-12-28", "2014-12-29", "2014-12-30", "2015-01-01", "2015-01-02", "2015-01-03", "2015-01-04", "2015-01-05", "2015-01-06", "2015-01-07", "2015-01-08", "2015-01-09", "2015-01-10", "2015-01-11", "2015-01-12", "2015-01-13", "2015-01-14", "2015-01-15", "2015-01-16", "2015-01-17", "2015-01-18", "2015-01-19", "2015-01-20", "2015-01-22", "2015-01-23", "2015-01-24", "2015-01-25", "2015-01-26", "2015-01-28", "2015-01-29", "2015-01-31", "2015-02-01", "2015-02-02", "2015-02-03", "2015-02-05", "2015-02-06", "2015-02-09", "2015-02-10", "2015-02-11", "2015-02-12", "2015-02-13", "2015-02-14", "2015-02-15", "2015-02-16", "2015-02-18", "2015-02-19", "2015-02-20", "2015-02-21", "2015-02-22", "2015-02-23", "2015-02-24"],
						axisLabel: {
							color: "#aaaaaa"
						},
						splitLine:{
							show: true,
							lineStyle:{
								color: "#62626A"
							}
						}
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							color: "#aaaaaa"
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: "#62626A"
							}
						},
						splitLine:{
							show: true,
							lineStyle:{
								color: "#62626A"
							}
						}
					},
					//数据区域缩放组件
					dataZoom: {
					    start: 10,
					    type: "inside",
						zoomLock:true,//只平移不缩放
					  },
					series: [{
						 data: [156, 140, 133, 186, 182, 106, 119, 68, 54, 82, 90, 134, 188, 194, 159, 159, 169, 244, 199, 163, 149, 80, 67, 162, 140, 143, 125, 76, 119, 70, 104, 109, 159, 124, 135, 150, 164, 169, 83, 155, 75, 59, 78, 136, 103, 104, 176, 89, 127, 54, 100, 140, 186, 200, 61, 109, 111, 114, 97, 94, 66, 54, 87, 80, 84, 117, 168, 129, 127, 64, 60, 144, 170, 58, 87, 70, 53, 92, 78, 123, 95, 54, 68, 200, 314, 379, 346, 233, 80, 73, 76, 132, 211, 289, 250, 82, 99, 163, 267, 353, 78, 72, 88, 140, 206, 204, 65, 59, 150, 79, 63, 93, 80, 95, 59, 65, 77, 143, 98, 64, 93, 282, 155, 94, 196, 293, 83, 114, 276, 54, 65, 51, 62, 89, 65, 82, 276, 153, 52, 69, 113, 82, 99, 53, 103, 100, 73, 155, 243, 155, 125, 65, 65, 79, 200, 226, 122, 60, 85, 190, 105, 208, 59, 160, 211, 265, 386, 118, 89, 94, 77, 113, 143, 257, 117, 185, 119, 65, 87, 60, 108, 188, 143, 62, 100, 152, 166, 55, 59, 175, 293, 326, 153, 73, 267, 183, 394, 158, 86, 207],
						type: 'line',
						itemStyle: {
							color: "#00A99D"
						},
						areaStyle: {
							color: "#1A6165"
						}
					}]
				},
				optionTest:{
					legend: {
						orient: 'horizontal',
						bottom: 0,
						padding: [100, 50, 0, 5],
						textStyle: {
							color: "#aaaaaa",
							lineHeight: 1
						},
						height: "1%"
					},
					grid: {
						top:'12%',
						left: '15%',
						right: '15%',
						bottom: '17%',
						containLabel: true
					},
					tooltip: {},
					dataset: {
						source: [
							['product', '日产量/件', '运行时长/h'],
							['09/03', 43.3, 85.8],
							['09/04', 83.1, 73.4],
							['09/05', 86.4, 65.2],
							['09/06', 72.4, 53.9]
						]
					},
					xAxis: {type: 'category'},
					yAxis: {						
						axisLabel: {
							color: "#aaaaaa"
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: "#62626A"
							}
						},
						splitLine:{
							show: true,
							lineStyle:{
								color: "#62626A"
							}
						}
					},
				},
				
				optionBar: {
				  tooltip: {
				    trigger: 'axis',
				    // axisPointer: {type: 'cross'}
				  },
				  grid: {
				    right: '5%',
					left:'5%',
					top:'5%',
					bottom: '13%',
					containLabel: true
				  },
				  legend: {
				    data: ['日产量/件', '运行时长/h'],
					orient: 'horizontal',
					bottom: 0,
					padding: [100, 50, 0, 5],
					textStyle: {
						color: "#aaaaaa",
						lineHeight: 1
					},
					height: "1%"
				  },
				  xAxis: [
				    {
				      type: 'category',
				      axisTick: {
				        alignWithLabel: true
				      },
				      // prettier-ignore
				      data: ['09-22', '09-23', '09-24', '09-25', '09-26']
				    }
				  ],
				  yAxis: [
				    {
				      type: 'value',
				      // name: '日产量/件',
				      position: 'left',
				      alignTicks: true,
				      axisLine: {
				        show: true,
				        lineStyle: {
				          color: '#00A99D'
				        }
				      },
					  splitLine:{
					  	show: false,
					  	lineStyle:{
					  		color: "#62626A"
					  	}
					  },
				      axisLabel: {
				        // formatter: '{value} 件'
						formatter: '{value} '
				      }
				    },
				    {
				      type: 'value',
				      // name: '运行时长/h',
				      position: 'right',
				      alignTicks: true,
				      //offset: 80,
				      axisLine: {
				        show: true,
				        lineStyle: {
				          color: '#FBB03B'
				        }
				      },
					  splitLine:{
					  	show: false,
					  	lineStyle:{
					  		color: "#62626A"
					  	}
					  },
				      axisLabel: {
				        formatter: '{value} '
				      }
				    }
				  ],
				  series: [
				    {
						name: '日产量/件',
						type: 'bar',
						itemStyle: {
							color: "#00A99D"
						},
						data: [10200,11250,12690,8209,21150]
				    },
				    {
						name: '运行时长/h',
						type: 'bar',
						itemStyle: {
							color: "#FBB03B"
						},
						yAxisIndex: 1,
						data: [11,8,13.9,16.48,5.65]
				    }
				  ]
				},
			}
		},
		async mounted() {
			console.log(echarts.version);
			//设备利用率
			// this.$refs.chartPie.init(echarts, chartPie=> {
			// 	chartPie.setOption(this.optionPie);
			// });
			//实时加工周期曲线
			/* this.$refs.chartLine.init(echarts, chartLine=> {
				chartLine.setOption(this.optionLine);
			}); */
			// this.$refs.chartBar.init(echarts, chartBar=> {
			// 	chartBar.setOption(this.optionBar);
			// });
		},
		onLoad(option) {
			//设备ID
			this.machineId = option.machineId;
			this.getInitData();
		},
		//过滤器
		filters: {
			nullzhuanzero(msg) {
				return '' == msg ? 0 : msg;
			},
			nullzhuantime(msg){
				return null == msg ? '----' : msg;
			}
		},
		methods: {
			//获取数据源
			async getInitData(){
				uni.showLoading({title:'加载中...',mask:true});
				//请求
				let [err,res] = await this.$http.post('getMachineData',{machineId:this.machineId},{token:true,checkToken:true});
				uni.hideLoading();
				console.log(res.data.data);
				//设备名称
				this.machineName = res.data.data.machine_name;
				//实时数据
				this.real_product_name = res.data.data.machine_product_name;
				this.real_product_cycle = res.data.data.machine_product_cycle;
				//当月设备利用率
				this.optionPie.series[0].data = res.data.data.mothMachineRate;
				this.$refs.chartPie.init(echarts, chartPie=> {
					chartPie.setOption(this.optionPie);
				});
				//当班加工周期折线图
				this.optionLine.xAxis.data = res.data.data.line_cycle.dataBarxAxis;
				this.optionLine.series[0].data = res.data.data.line_cycle.dataBaryAxis;
				this.$refs.chartLine.init(echarts, chartLine=> {
					chartLine.setOption(this.optionLine);
				});
				//近7天日产量与运行时长分析 x轴
				this.optionBar.xAxis[0].data = res.data.data.bar.dataBarxAxis;
				//y轴1：日产量/件
				this.optionBar.series[0].data = res.data.data.bar.dataBaryAxis[0];
				//y轴2：运行时长/h
				this.optionBar.series[1].data = res.data.data.bar.dataBaryAxis[1];
				this.$refs.chartBar.init(echarts, chartBar=> {
					chartBar.setOption(this.optionBar);
				});

			},
		}
	}
</script>

<style>

</style>
